<div class="cart toggle" appHoverShow>
  {{miniCart | json}}
  <a href="" class="cart-link over-hidden firstchild-link">
    <i class="iconfont iconfont-cart">&#xe637;</i>
    <span>我的购物车</span>
    <em class="cart-number">{{cartResult.totalNumber}}</em>
  </a>
  <div class="content">
    <div class="empty-cart" *ngIf="cartResult.totalNumber === 0">
      <i class="iconfont emp-cart-icon">&#xe631;</i>
      <span>您的购物车中还没有商品，赶快去选购吧</span>
    </div>
    <div *ngIf="cartResult.totalNumber > 0" class="cart-info">
      <p>购物车中的商品：</p>
      <ul class="uk-list">
        <li *ngFor="let item of cartResult.cart; let i = index">
          <div class="grid grid-collapse">
            <div class="width-2-10">
              <img src="{{item.image}}" alt="">
            </div>
            <div class="width-5-10 goods-name">
              <span>{{item.name | shorten : 40}}</span>
            </div>
            <div class="width-3-10 price">
              <span>{{item.price}}</span>x
              <span>{{item.quantity}}</span>
              <a (click)="onDelete(item.goodsId)">删除</a>
            </div>
          </div>
        </li>
      </ul>
      <div class="grid grid-collapse total">
        <div class="width-7-10">
          共<span>{{cartResult.totalNumber}}</span>件商品，共计
          <span>{{cartResult.totalPrice}}</span>元
        </div>
        <div class="width-3-10">
          <a routerLink="/cart">去购物车</a>
        </div>
      </div>
    </div>
  </div>
</div>

